<template>
  <div>
    <a-table
      rowKey="id"
      :row-selection="{ onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <span slot="date" slot-scope="date"> {{ humanizeDate(date) }}</span>
      <span slot="calcDate" slot-scope="calcDate"> {{ humanizeDate(calcDate) }}</span>
      <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
    </a-table>
    <div class="flex justify-center">
      <a-button type="primary" @click="next">
        下一步
      </a-button>
    </div>
  </div>
</template>
<script>
import { getWithdraw } from '@/api/common'
import moment from 'moment'
export default {
  name: 'firstStep',
  data() {
    return {
      columns: [
        {
          title: '编号',
          dataIndex: 'projectNum',
          key: 'projectNum'
        },
        {
          title: '客户',
          dataIndex: 'clientName',
          key: 'clientName'
        },
        {
          title: '项目名称',
          dataIndex: 'addr',
          key: 'addr'
        },
        {
          title: '阶段',
          dataIndex: 'stage',
          key: 'stage'
        },
        {
          title: '律师',
          dataIndex: 'lawyerName',
          key: 'lawyerName'
        },
        {
          title: '提款日期',
          dataIndex: 'date',
          key: 'date',
          scopedSlots: { customRender: 'date' }
        },
        {
          title: '计算日期',
          dataIndex: 'calcDate',
          key: 'calcDate',
          scopedSlots: { customRender: 'calcDate' }
        },
        {
          title: '货币',
          dataIndex: 'currency',
          key: 'currency'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          key: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '性质',
          dataIndex: 'nature',
          key: 'nature'
        }
      ],
      data: [],
      selectedRows: [],
      loading: false,
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },

  mounted() {
    this.getData()
  },
  methods: {
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    next() {
      if (this.selectedRows.length == 0) return
      let flag = true
      let first = this.selectedRows[0]
      for (let item of this.selectedRows) {
        flag = first.currency === item.currency && flag
        flag = first.lawyerName === item.lawyerName && flag
        if (!flag) break
      }
      if (flag) {
        this.$emit('submit', this.selectedRows)
      } else {
        this.$message.error('必须选择相同的货币类型和律师 ')
      }
    },
    humanizeDate(v) {
      4
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    onSelectChange(keys, selectedRows) {
      this.selectedRows = selectedRows
    },
    async getData(page = 1) {
      const _form = {
        page,
        limit: this.pagination.pageSize,
        status: 0
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      const res = await getWithdraw(_form)
      const data = res.result.data
      this.pagination.total = data.total
      // const _data = []
      // data.list.map((el, i) => {
      //   if (el.status == 0) _data.push(el)
      //   el.index = i
      //   return el
      // })
      this.data = data.list
    }
  }
}
</script>
<style lang="css" scoped></style>
